<template>
  <div :class="['x-ad-summary', 'tree-item', disabled ? 'position-summary--disabled' : '']">
    <div :class="['tree-summary', isEdit ? 'not-click' : '', checked ? 'active' : '']" @click="onChange">
      <n-icon :class="{ visibility: !checked }" :size="18" :component="CheckCircleTwotone" />
      <strong>{{ detail.name }}</strong>
      <span>{{ detail.desc }}</span>
    </div>
    <!-- <div v-if="detail.children && checked" class="tree-children">
      <div v-for="item in detail.children" :key="item.id" :class="{ active: siteSet.some((t) => t === item.id), }"
        class="tree-summary" @click="onChangeChildren(item)">
        <n-icon :class="{ visibility: !siteSet.some((t) => t === item.id) }" :size="18"
          :component="CheckCircleTwotone" />
        <strong>{{ item.name }}</strong>
      </div>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { computed } from 'vue'
import { useStore } from '@/store'
import { NIcon } from 'naive-ui'
import { CheckCircleTwotone } from '@vicons/antd'
const store = useStore();
const emit = defineEmits(['update'])
const props = defineProps({
  detail: {
    type: Object,
    default: () => ({})
  },
  select: {
    type: Object,
    default: () => ({})
  },
  list: {
    type: Array,
    default: () => []
  },
  disabled: {
    default: false,
  }
})
const position = computed(() => store.state.adv.modal.position);
const diect = computed(() => store.state.adv.modal.diect);
const adv = computed(() => store.state.adv.modal);
const isEdit = computed(() => {
  return store.state.adv.modal.id
})
const siteSet = computed(() => {
  return store.state.adv.modal.position.siteSet
})
const currentId = computed(() => {
  return props.detail.children?.length > 0
    ? props.detail.children.map((item: { id: any }) => {
      return item.id
    })
    : [props.detail.id]
})
const children = computed(() => {
  return props.detail.children?.length > 0
    ? props.detail.children.map((item: { id: any }) => {
      return item.id
    })
    : []
})
const checked = computed(() => {
  if (children.value.length) {
    return children.value.some((item: any) => {
      return siteSet.value.some((t: any) => t === item)
    })
  } else {
    return siteSet.value.some((item: any) => item === props.detail.id)
  }
})
async function onChange() {
  if (props.disabled) return;
  if (isEdit.value) {
    return false
  }

  let site = siteSet.value || []
  if (props.detail.multiSelect) {
    // 支持多选
    let isRadio
    site.forEach((item: any) => {
      // 已经选数据中是否含有单选id
      isRadio = props.select.radio.some((s: any) => s === item)
    })
    if (isRadio) {
      // 含有单选数据，直接使用当前id集进行替换
      site = [...currentId.value]
    } else if (checked.value) {
      let is = true
      // 当前id集是否都被选中
      currentId.value.forEach((item: any) => {
        if (!site.some((s: any) => s === item)) {
          is = false
        }
      })
      if (is) {
        // 已全被选中的，并且非最后一个组id集，那么进行取消
        if (site.length > currentId.value.length) {
          currentId.value.forEach((item: any) => {
            const index = site.findIndex((s: any) => s === item)
            if (index !== -1) {
              site.splice(index, 1)
            }
          })
        }
      } else {
        // 未被全选中的，进行选中
        currentId.value.forEach((item: any) => {
          if (!site.some((s: any) => s === item)) {
            site.push(item)
          }
        })
      }
    } else {
      // 多选叠加
      site.push(...currentId.value)
    }
  } else {
    // 单选
    site = [...currentId.value]
  }

  // 更新数据
  // 点击后获取模板
  if (position.value.noCreativeScene) return;
  emit('update', siteSet.value);

}
// 切换子级
async function onChangeChildren(row: { id: any }) {
  if (isEdit.value) {
    return false
  }
  let site = siteSet.value || []
  if (site.some((t: any) => t === row.id)) {
    site = site.filter((item: any) => item !== row.id)
  } else {
    site.push(row.id)
  }
  if (site.length) {

    // store.commit('adv/UPDATE_POSITION_INFO', {
    //   siteSet: site
    // });
    // adv.value.schedulePrice.deepConversionGoal = undefined;
    // 点击后获取模板






    // 更新数据
    // store.dispatch('intelligent/setData', {
    //   'creative.templateId': null,
    //   'position.siteSet': site
    // })
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/var.scss';

.position-summary--disabled {
  background-color: #f2f4f7;
  opacity: 0.2;
  cursor: not-allowed;

  .tree-summary {
    cursor: not-allowed;
  }

}

.x-ad-summary {
  .tree-summary {
    display: flex;
    box-align: center;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 10px;
    cursor: pointer;

    &:hover {
      background: #fafafa;
    }

    &.active {

      i,
      strong {
        color: $primaryColor;
      }
    }

    i {
      width: 30px;

      &.visibility {
        visibility: hidden;
      }
    }

    strong {
      width: 240px;
      font-weight: normal;
    }

    span {
      flex: 1;
      font-size: 12px;
      color: #999;
    }
  }

  .tree-children {
    padding-left: 30px;
    background: #fafafa;

    strong {
      width: 210px;
    }
  }
}

.not-click {
  cursor: not-allowed;
}
</style>
